'use client'

import { motion } from 'framer-motion'
import { ChevronRightIcon } from '@heroicons/react/24/outline'

const features = [
  {
    title: "Premium Build Quality",
    description: "Aircraft-grade aluminum frame with double-shot PBT keycaps",
    icon: "🛠️"
  },
  {
    title: "RGB Backlighting",
    description: "16.8 million colors with multiple lighting effects",
    icon: "💡"
  },
  {
    title: "Hot-swappable Switches",
    description: "Easily customize your typing experience",
    icon: "🔄"
  }
]

export default function Features() {
  return (
    <section className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl font-bold mb-4">Why Choose Us</h2>
          <p className="text-gray-600">Discover the premium features of our keyboards</p>
        </motion.div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.2 }}
              viewport={{ once: true }}
              className="p-6 bg-gray-50 rounded-lg hover:shadow-lg transition-shadow"
            >
              <div className="text-4xl mb-4">{feature.icon}</div>
              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
              <p className="text-gray-600 mb-4">{feature.description}</p>
              <button className="text-accent flex items-center hover:underline">
                Learn more <ChevronRightIcon className="w-4 h-4 ml-1" />
              </button>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
} 